<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>分割按钮</title>
    
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.min.css"></link>
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>	
    <script type="text/javascript" src="../mock-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    
    <script type="text/javascript">
        var HISUIStyleCode = 'blue';
    </script>
</head>
<body>
    <h2>分割按钮</h2>
    <h3>说明:</h3>
    <span>分割按钮（Split Button）包含一个链接按钮（Link Button）和一个菜单（Menu）。当用户点击或者鼠标悬停在向下箭头区域，将会显示一个对应的菜单。</span>
	<h3>如：</h3>
	<div class="demo-exp-code entry-content"> 
    <div style="width: 533px;border: 1px solid transparent;padding: 1px">
		<a href="javascript:void(0)" id="sb1" class="hisui-splitbutton" data-options="menu:'#mm2',iconCls:'icon-abort-order',onClick:function(){
            $.messager.popover({msg:'按钮自己',type:'info'});
        }">医嘱处理</a>   
        <div id="mm2" style="width:140px;" class="menu-no-icon">   
            <div onclick="$.messager.popover({msg:'停止',type:'info'});">停止</div>
            <div onclick="$.messager.popover({msg:'作废',type:'info'});">作废</div>
            <div onclick="$.messager.popover({msg:'撤销',type:'info'});">撤销</div>
        </div>
        <a href="javascript:void(0)" id="sb2" class="hisui-splitbutton" data-options="menu:'#mm3',plain:false,onClick:function(){
            $.messager.popover({msg:'按钮自己',type:'info'});
        }">打印[F6]</a>   
        <div id="mm3" style="width:100px;" class="menu-no-icon">   
            <div onclick="$.messager.popover({msg:'PDF',type:'info'});">打印PDF</div>   
            <div onclick="$.messager.popover({msg:'预览',type:'info'});">打印预览</div>
            <div onclick="$.messager.popover({msg:'报告',type:'info'});">打印报告</div>   
        </div>
    </div>
		<pre class="prettyprint hide lang-html"><code>&lt;a href="javascript:void(0)" id="sb1" class="hisui-splitbutton" data-options="menu:'#mm2',iconCls:'icon-abort-order',onClick:function(){
    $.messager.popover({msg:'按钮自己',type:'info'});
}"&gt;作废医嘱&lt;/a&gt;   
&lt;div id="mm2" style="width:100px;" class="menu-no-icon"&gt;   
    &lt;div onclick="$.messager.popover({msg:'停止',type:'info'});"&gt;停止&lt;/div&gt;   
    &lt;div onclick="$.messager.popover({msg:'作废',type:'info'});"&gt;作废&lt;/div&gt;   
&lt;/div&gt;</code></pre>
	</div>
	<prettyprint/>
</body>
</html>